How does this syntax work? It doesn't look like a valid function name with these special characters in it; is this some kind of way to insert a variable as the function name?

$onChild is defined in xfa_object like this: const $onChild = Symbol();
And the way to use this symbol as a function name is to use brackets:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#symbol_wrapper_objects_as_property_keys
The only way to call this function is to have the symbol so there's no access by name (as a string).

Cool, learned something new then :-)

It's not entirely clear yet as to why this is needed exactly (i.e., why access by name causes conflicts here), but that requires a more in-depth look. This syntax was just something I noticed and didn't know; thanks for explaining this!

In the specs there is something call SOM expressions to select nodes:
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.364.2157&rep=rep1&type=pdf#page=101&zoom=auto,-207,766
These expressions seem to be used in different places.
And so in order to make easy their interpretation, each part of the expression can be searched as a own property of the object without the need to keep a flag somewhere to check if the property exists by spec or if it is an implementation detail.
And I guess it'll avoid any bad use an attacker could do with specific expressions.
So my idea was to have objects which are the exact reflection of specs in hiding implementations details and thx to that we can enjoy the object model stuff like overriding $onChildCheck method when a specific node can accept a node from another namespace.
So from my pov, it makes the implementation safer, simpler and reduce memory use (no need to track spec properties...).
And since it's unusual I added this $ symbols to help to see them.